<template>
    <div class="homeBanner">
        <div>
            <img alt="logo" src="../../assets/logo.png" class="logo" />
            <text class="title">｜学生画像</text>
            <div class="user">
                <img
                    v-if="home"
                    class="home-icon"
                    src="../../assets/home-icon.png"
                    @click="
                        () => {
                            this.$router.push({ name: 'home' })
                        }
                    "
                    alt="home"
                />
                <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        home: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            keyword: '',
        }
    },

    methods: {},
}
</script>

<style lang="less" scoped>
.homeBanner {
    height: 96px;
    background-image: url('@/assets/header.png');

    .logo {
        margin-left: 70px;
        margin-top: 10px;
        width: 313px;
        height: 59px;
    }

    .title {
        font-size: 26px;
        color: #fff;
        text-align: center;
        font-weight: bold;
        padding: 20px 0;
    }

    .user {
        float: right;
        margin: 10px 50px;
    }

    .home-icon {
        margin-right: 30px;
        width: 32px;
        height: 32px;
    }
}
</style>
